<section id="cert">
  <div class="row" *ngIf="error">
    <div class="col-sm-12">
      {{error}}
    </div>
  </div>

  <div class="row" *ngIf="!loaded && !error">
    <div class="col-sm-12 page-load">
      <div class="loading-indicator"></div>
    </div>
  </div>

  <div class="row" *ngIf="loaded">
    <div class="col-md-8 col-sm-7">
      <h1 class="business-title">{{record.org.legalName}}</h1>

      <a [routerLink]="['/org', record.verifiableOrgId] | localize" class="title-back-link mrgn-bttm-md"><span class="fa fa-arrow-left"></span> {{'org.return-link' | translate}}</a>

      <h2 class="cert-title">{{record.type.claimType}}</h2>

      <section *ngIf="record.inactiveReason && record.inactiveReason.id" class="alert alert-danger">
        <h2 class="panel-title"><span class="fa fa-exclamation-triangle"></span> {{'cert.inactive-message' | translate}} {{record.inactiveReason.reason}}</h2>
      </section>

      <div class="row">
        <div class="col-md-12 cert-info">
          <div class="row form-group">
            <label class="col-sm-4 control-label" translate>cert.issuer</label>
            <div class="col-sm-8 form-field">
              <a [routerLink]="['issuer'] | localize">{{record.issuer.name}}</a>
            </div>
          </div>
          <div class="row form-group" *ngIf="record.type.issuerURL && record.type.issuerURL !== 'no'">
            <label class="col-sm-4 control-label" translate>cert.issuer-website</label>
            <div class="col-sm-8 form-field">
              <a [href]="record.type.issuerURL" rel="external">
                {{record.type.issuerURL}}</a>
              <small><span class="fa fa-external-link"></span></small>
            </div>
          </div>
          <div class="row form-group">
            <label class="col-sm-4 control-label" translate>cert.effective-date</label>
            <div class="col-sm-8 form-field">
              {{record.effectiveDate}}
            </div>
          </div>
          <div class="row form-group">
            <label class="col-sm-4 control-label" translate>cert.expiry-date</label>
            <div class="col-sm-8 form-field">
              {{record.endDate || '-'}}
            </div>
          </div>
          <div class="row form-group" *ngIf="others.length">
            <label class="col-sm-4 control-label" translate>cert.related-certs</label>
            <div class="col-sm-8 form-field">
              <div *ngFor="let rel of others" class="rel-link">
                <a [routerLink]="['/org', record.verifiableOrgId, 'cert', rel.id] | localize">{{rel.effectiveDate}}</a>
              </div>
            </div>
          </div>
          <div class="row form-group mrgn-tp-lg">
            <div class="col-sm-4">
              <button type="button" [class]="'btn btn-primary btn-verify' + (verifying ? ' loading' : '')" (click)="verifyClaim($event)"><span class="fa fa-accept"></span> {{'cert.verify-button-label' | translate}}</button>
            </div>
            <div class="col-sm-8 mrgn-tp-sm">
              <a class="verify-help" href="#" translate>cert.whats-this-link</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4 col-sm-5 hidden-xs">
      <div class="cert-badge">
        <img src="assets/cert.svg" [class]="'color-' + record.color" alt="">
      </div>
    </div>
  </div>

  <div class="row cert-verify" *ngIf="verifyResult || verifying">
    <div class="col-sm-12" *ngIf="verifying">
      <section class="alert alert-info">
        <p translate>cert.requesting-proof</p>
      </section>
    </div>
    <div class="col-sm-12" *ngIf="! verifying">
      <div [class]="'verify-result panel panel-' + (verifyStatus == 'success' ? 'success' : 'warning')" *ngIf="verifyStatus && verifyStatus !== 'error'">
        <div class="panel-heading">
          {{'cert.verify-status' | translate}} {{verifyStatus}}
        </div>
        <div class="panel-body">
          <code>{{verifyResult}}</code>
        </div>
      </div>
      <section class="alert alert-danger" *ngIf="verifyStatus === 'error'">
        <p>{{verifyResult}}</p>
      </section>
    </div>
  </div>

  <!-- http://certificates-bootcamp.mit.edu/57b5085663e25800096f99b4 -->
  <div class="row cert-verify-old" style="display: none">
    <div class="col-sm-12">
      <div class="verify-line"><span class="verify-pfx">Verify certificate:</span> <span id="verify-status">Pending verification ...</span></div>
      <div class="verify-line">Computing SHA256 digest of local certificate [DONE 1/5]</div>
      <div class="verify-line delay">Fetching hash in OP_RETURN field [DONE 2/5]</div>
      <div class="verify-line delay">Comparing local and blockchain hashes [PASS 3/5]</div>
      <div class="verify-line delay">Checking Verified Organization signature [PASS 4/5]</div>
      <div class="verify-line delay">Checking not revoked by issuer [PASS 5/5]</div>
      <div class="verify-line delay"><span class="verify-pfx">Success!</span> The certificate has been verified.</div>
      <div class="verify-line"><span class="verify-pfx">Public Key:</span> 1GuqT4EpnhmA6GQvA3Fz5JWPjcZyXSQpFw</div>
    </div>
  </div>
</section>
